<template>
  <div class="app-container">

    <el-input
      v-model="filterText"
      placeholder="输入关键字进行过滤"/>
    <el-button type="text" @click="dialogFormVisible = true">添加一级分类</el-button>
    <el-tree
      ref="tree"
      :data="subjectList"
      :props="defaultProps"
      :filter-node-method="filterNode"
      :expand-on-click-node="false"
      node-key="id"
      class="filter-tree"
      default-expand-all>
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <span>{{ node.label }}</span>
        <el-button
          v-if="node.level === 1"
          class="el-ic"
          type="text"
          size="mini"
          @click="() => {dialogFormVisible = true;subject.parentId=data.id}">添加二级分类</el-button>
        <el-button
          v-if="node.level === 2 || node.level === 1"
          class="el-ic"
          type="text"
          size="mini"
          @click="() => remove(node, data)">删除</el-button>
      </span>
    </el-tree>
    <el-dialog :visible.sync="dialogFormVisible" title="添加分类">
      <el-form :model="subject" label-width="120px">
        <el-form-item label="分类标题">
          <el-input v-model="subject.title"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="append()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import subject from '@/api/edu/subject'

export default {
  data() {
    return {
      dialogFormVisible: false,
      showBtn: true,
      subject: {
        title: '',
        parentId: ''
      },
      filterText: '', // 过滤文本
      subjectList: [], // 课程列表
      defaultProps: {
        children: 'children',
        label: 'title'
      }
    }
  },

  watch: {
    filterText(newVal, oldVal) {
      this.$refs.tree.filter(newVal)
    }
  },

  created() {
    this.fetchNodeList()
  },

  methods: {
    mouseenter(scope) {
      this.$set(scope.row, 'del', true)
    },
    mouseleave(scope) {
      this.$set(scope.row, 'del', false)
    },
    // 删除分类
    remove(node, data) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用方法进行删除,return表示后面then还会执行
        return subject.deleteSubjectById(data.id)
      }).then(() => { // 如果上一个then成功则执行此处的then回调
        // 刷新页面
        // 第一种 请求后台查询数据库效率较低
        // this.fetchNodeList()
        // 第二种  删除节点（效率高）
        this.$refs.tree.remove(node)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch((response) => { // 失败
        if (response === 'cancel') {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        } else {
          this.$message({
            type: 'error',
            message: '删除失败'
          })
        }
      })
    },
    // 获取树节点数据
    fetchNodeList() {
      subject.getNestedTreeList().then(response => {
        if (response.success) {
          this.subjectList = response.data.items
        }
      })
    },

    // 节点过滤的方法
    filterNode(value, data) {
      if (!value) return true
      return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1
    },

    // 添加分类
    append() {
      subject.saveLevel(this.subject).then(response => {
        this.$message({
          type: 'success',
          message: '保存成功!'
        })
        this.dialogFormVisible = false// 如果保存成功则关闭对话框
        this.fetchNodeList()// 刷新列表
        this.subject.title = ''// 重置类别标题
        this.subject.parentId = '' // 重置表单parentId
      }).catch((response) => {
        this.$message({
          type: 'error',
          message: response.data.message
        })
      })
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .el-ic {
    display: none;
  }
  .el-tree-node__content:hover .el-ic {
    display: inline-block;
  }
</style>
